<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 14:04:23
 * @LastEditTime: 2024-04-29 12:16:23
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\components\scenic.vue
 * jiu
-->
<template>
	<view class="fixed left-24rpx z-23 w-702rpx box-border p-24rpx bg-#fff b-rd-24rpx" :class="{ open: description }" :style="{ bottom: boxHeight }" >
		<view class="flex items-center justify-between">
			<view class="flex items-center">
				<image src="/static/images/location.png" class="w-32rpx h-32rpx"></image>
				<text class="text-#3D3D3D font-700 text-size-30rpx ml-12rpx">{{ markItem.title }}</text>
			</view>

			<view class="flex items-center">
				<view
					class="bg w-156rpx h-64rpx font-700 text-size-28rpx text-#0CCA92 text-center line-height-64rpx mr-12rpx"
					@click="$emit('go_nav'), (description = false)"
				>
					去这里
				</view>
				<view class="bg_up w-64rpx h-64rpx b-rd-50% rotate-0 mr-12rpx" @click="description = !description"></view>
				<view class="bg_cls w-64rpx h-64rpx b-rd-50% rotate-0" @click="$emit('close_nav')"></view>
			</view>
		</view>
		<view v-if="description" class="mt-16rpx">
			<view class="mb-12rpx" v-show="markItem.audio">
				<audio_custom :src="rec_url + markItem.audio" />
			</view>
			<view class="text-#666666 text-size-26rpx indent-12rpx">
				{{ markItem.description }}
			</view>
		</view>
	</view>
</template>

<script>

	import audio_custom from '@/components/audio_custom/index.vue';
	import { screenWidth, screenHeight, rpxToPx } from '@/utils/index.js';
	export default {
		props: ['markItem'],
		components: { audio_custom },
		data() {
			return {
				description: false,
				boxHeight2: rpxToPx(420) + 'px',
			};
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			},
			boxHeight() {
				const map_nav_type = this.$store.getters.map_nav_type;
				let result = rpxToPx(420).toFixed(2) + 'px';
				if (map_nav_type != 'map_nav') {
					result = rpxToPx(420).toFixed(2) + 'px';
				}
				console.log(result, 'resultheight==');
				return result;
			},
		},
		onLoad(options) {},
		watch: {
			markItem(newVal, oldVal) {
				console.log('watch oldVal', oldVal);
				console.log('watch newVal', newVal);
				console.log('watch MarkItem', this.description);
				//开关一下 刷新界面组件
				if (this.description) {
					this.description = false;
					setTimeout(() => {
						this.description = true;
					}, 0);
				}
			},
		},
		mounted() {},
		methods: {},
		beforeDestroy() {
			this.description = false;
		},
	};
</script>

<style lang="scss" scoped>
	// .bg_cnt{
	// 	bottom: var(--boxHeight);
	// }
	.bg {
		border-radius: 64rpx;
		background: linear-gradient(90deg, rgba(33, 188, 145, 0.2) 0%, rgba(183, 228, 71, 0.2) 100%);
	}

	.bg_up {
		background: url('/static/images/up.png') no-repeat center center, #cef4e9;
		background-size: 36rpx 36rpx;
		transition: all 0.3s;
	}
	.open .bg_up {
		transform: rotate(-180deg);
	}
	.bg_cls {
		background: url('/static/images/close.png') no-repeat center center/100% 100%, #cef4e9;
	}
</style>
